<!-- 中间面板的组件 -->
<template>

    <!-- 输入框 -->
    <template v-if="item.type == 'input'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-input v-model:value="pageData[item.field]" :size="item.componentProps.size"
                :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                :placeholder="item.componentProps.placeholder" @keyup.enter="getCustomMethod(item,'enter',$event)"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" @input="getCustomMethod(item,'input',$event)"></a-input>
        </a-form-item>
    </template>

    <!-- 颜色选择器 -->
    <template v-if="item.type == 'colorPicker'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-input type="color" v-model:value="pageData[item.field]" :size="item.componentProps.size"
                :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                :placeholder="item.componentProps.placeholder"
                @change="getCustomMethod(item,'change',$event)"></a-input>
        </a-form-item>
    </template>

    <!-- 下拉框 -->
    <template v-else-if="item.type == 'select'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-select v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                :style="item.componentProps.style" :bordered="item.componentProps.bordered"
                :disabled="item.componentProps.disabled" @blur="getCustomMethod(item,'blur',$event)"
                @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)">
                <a-select-option v-for="(option, index) in item.componentProps.options" :key="index"
                    :value="option.value">{{ option.label }}</a-select-option>
            </a-select>
        </a-form-item>
    </template>

    <!-- 单选框 -->
    <template v-else-if="item.type == 'radio'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-radio-group v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                :buttonStyle="item.componentProps.buttonStyle" :style="item.componentProps.style"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                @change="getCustomMethod(item,'change',$event)">
                <template v-if="item.componentProps.radioType == 'default'">
                    <a-radio v-for="(option, index) in item.componentProps.options" :key="index"
                        :value="option.value">{{ option.label }}</a-radio>
                </template>
                <template v-if="item.componentProps.radioType == 'button'">
                    <a-radio-button v-for="(option, index) in item.componentProps.options" :key="index"
                        :value="option.value">{{ option.label }}</a-radio-button>
                </template>
            </a-radio-group>
        </a-form-item>
    </template>

    <!-- 多选框 -->
    <template v-else-if="item.type == 'checkbox'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-checkbox-group v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                :buttonStyle="item.componentProps.buttonStyle" :style="item.componentProps.style"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                @change="getCustomMethod(item,'change',$event)">
                <a-checkbox v-for="(option, index) in item.componentProps.options" :key="index"
                    :value="option.value">{{ option.label }}</a-checkbox>
            </a-checkbox-group>
        </a-form-item>
    </template>

    <!-- 文本域 -->
    <template v-else-if="item.type == 'textarea'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-textarea v-model:value="pageData[item.field]" :placeholder="item.componentProps.placeholder"
                :size="item.componentProps.size" :maxlength="item.componentProps.maxlength"
                :allow-clear="item.componentProps.allowClear" :style="item.componentProps.style"
                :bordered="item.componentProps.bordered" :show-count="item.componentProps.showCount"
                :disabled="item.componentProps.disabled" :auto-size="item.componentProps.autoSize"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" @input="getCustomMethod(item,'input',$event)"
                @keyup.enter="getCustomMethod(item,'enter',$event)">
            </a-textarea>
        </a-form-item>
    </template>

    <!-- 数字输入框 -->
    <template v-else-if="item.type == 'inputNumber'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-input-number v-model:value="pageData[item.field]" style="width: 100%" :size="item.componentProps.size"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :keyboard="item.componentProps.keyboard" :min="item.componentProps.min" :max="item.componentProps.max"
                :style="item.componentProps.style" :placeholder="item.componentProps.placeholder"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" @input="getCustomMethod(item,'input',$event)"
                @keyup.enter="getCustomMethod(item,'enter',$event)" />
        </a-form-item>
    </template>

    <!-- 密码输入框 -->
    <template v-else-if="item.type == 'inputPassword'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-input-password v-model:value="pageData[item.field]" :size="item.componentProps.size"
                :allow-clear="item.componentProps.allowClear" :maxlength="item.componentProps.maxlength"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :show-count="item.componentProps.showCount" :style="item.componentProps.style"
                :placeholder="item.componentProps.placeholder" @blur="getCustomMethod(item,'blur',$event)"
                @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                @input="getCustomMethod(item,'input',$event)" @keyup.enter="getCustomMethod(item,'enter',$event)" />
        </a-form-item>
    </template>

    <!-- 按钮 -->
    <template v-else-if="item.type == 'button'">
        <a-button v-show="!item.componentProps.hidden" :style="item.componentProps.style"
            :type="item.componentProps.type" :size="item.componentProps.size" :disabled="item.componentProps.disabled"
            :ghost="item.componentProps.ghost" :loading="item.componentProps.loading"
            @click="getCustomMethod(item,'click',$event)">{{ item.label }}</a-button>
    </template>

    <!-- 标题 -->
    <template v-else-if="item.type == 'title'">
        <h1 v-if="item.componentProps.type == 'h1'" v-show="!item.componentProps.hidden"
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h1>
        <h2 v-if="item.componentProps.type == 'h2'" v-show="!item.componentProps.hidden"
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h2>
        <h3 v-if="item.componentProps.type == 'h3'" v-show="!item.componentProps.hidden" ref=""
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h3>
        <h4 v-if="item.componentProps.type == 'h4'" v-show="!item.componentProps.hidden"
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h4>
        <h5 v-if="item.componentProps.type == 'h5'" v-show="!item.componentProps.hidden"
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h5>
        <h6 v-if="item.componentProps.type == 'h6'" v-show="!item.componentProps.hidden"
            :align="item.componentProps.align" :style="item.componentProps.style">{{ item.label }}</h6>
    </template>

    <!-- 日历 -->
    <template v-if="item.type == 'calendar'">
        <a-calendar v-model:value="pageData[item.field]" :fullscreen="false" v-show="!item.componentProps.hidden"
            :style="item.componentProps.style" />
    </template>

    <!-- 警告提示 -->
    <template v-if="item.type == 'alert'">
        <a-alert :message="item.label" v-show="!item.componentProps.hidden" :type="item.componentProps.type"
            :style="item.componentProps.style" :closable="item.componentProps.closable"
            :show-icon="item.componentProps.showIcon" @close="getCustomMethod(item,'close',$event)" />
    </template>

    <!-- 时间轴 -->
    <template v-if="item.type == 'timeline'">
        <a-timeline :mode="item.componentProps.mode" v-show="!item.componentProps.hidden"
            :reverse="item.componentProps.reverse" :style="item.componentProps.style">
            <a-timeline-item v-for="(option, index) in item.componentProps.options" :color="option.color">
                {{ option.text }}
            </a-timeline-item>
        </a-timeline>
    </template>

    <!-- 分割线 -->
    <template v-if="item.type == 'divider'">
        <a-divider :type="item.componentProps.type" :plain="item.componentProps.plain"
            v-show="!item.componentProps.hidden" :dashed="item.componentProps.dashed" :style="item.componentProps.style"
            :orientation="item.componentProps.orientation">
            {{ item.label }}
        </a-divider>
    </template>

    <!-- 时间选择框 -->
    <template v-if="item.type == 'timePicker'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">

            <a-time-range-picker v-if="item.componentProps.range" v-model:value="pageData[item.field]"
                :placeholder="[item.componentProps.placeholder,item.componentProps.placeholder2]"
                value-format="HH:mm:ss" :allow-clear="item.componentProps.allowClear"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :size="item.componentProps.size" :style="item.componentProps.style"
                :showNow="item.componentProps.showNow" :hour-step="item.componentProps.hourStep"
                :status="item.componentProps.status" :minute-step="item.componentProps.minuteStep"
                :second-step="item.componentProps.secondStep" :placement="item.componentProps.placement"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)"
                @openChange="getCustomMethod(item,'openChange',$event)" />

            <a-time-picker v-else v-model:value="pageData[item.field]" value-format="HH:mm:ss"
                :status="item.componentProps.status" :placeholder="item.componentProps.placeholder"
                :allow-clear="item.componentProps.allowClear" :bordered="item.componentProps.bordered"
                :disabled="item.componentProps.disabled" :size="item.componentProps.size"
                :style="item.componentProps.style" :showNow="item.componentProps.showNow"
                :hour-step="item.componentProps.hourStep" :minute-step="item.componentProps.minuteStep"
                :second-step="item.componentProps.secondStep" :placement="item.componentProps.placement"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)"
                @openChange="getCustomMethod(item,'openChange',$event)" />
        </a-form-item>
    </template>

    <!-- 日期选择框 -->
    <template v-if="item.type == 'datePicker'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-range-picker v-if="item.componentProps.range" v-model:value="pageData[item.field]"
                :bordered="item.componentProps.bordered" :disabled="item.componentProps.disabled"
                :size="item.componentProps.size" :style="item.componentProps.style" :picker="item.componentProps.picker"
                :placement="item.componentProps.placement" :status="item.componentProps.status"
                :placeholder="[item.componentProps.placeholder,item.componentProps.placeholder2]"
                :format="item.componentProps.format" @blur="getCustomMethod(item,'blur',$event)"
                @focus="getCustomMethod(item,'focus',$event)" @change="getCustomMethod(item,'change',$event)"
                @panelChange="getCustomMethod(item,'panelChange',$event)"
                @openChange="getCustomMethod(item,'openChange',$event)" />

            <a-date-picker v-else v-model:value="pageData[item.field]" :bordered="item.componentProps.bordered"
                :disabled="item.componentProps.disabled" :size="item.componentProps.size"
                :style="item.componentProps.style" :picker="item.componentProps.picker"
                :placement="item.componentProps.placement" :status="item.componentProps.status"
                :placeholder="item.componentProps.placeholder" :format="item.componentProps.format"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" @openChange="getCustomMethod(item,'openChange',$event)"
                @panelChange="getCustomMethod(item,'panelChange',$event)" />
        </a-form-item>
    </template>

    <!-- 评分 -->
    <template v-if="item.type == 'rate'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-rate v-model:value="pageData[item.field]" :style="item.componentProps.style"
                :disabled="item.componentProps.disabled" :allowHalf="item.componentProps.allowHalf"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)"
                @hoverChange="getCustomMethod(item,'hoverChange',$event)" />
        </a-form-item>
    </template>

    <!-- 级联选择框 -->
    <template v-if="item.type == 'cascader'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-cascader v-model:value="pageData[item.field]" :style="item.componentProps.style"
                :disabled="item.componentProps.disabled" :options="item.componentProps.options"
                :size="item.componentProps.size" :allow-clear="item.componentProps.allowClear"
                :bordered="item.componentProps.bordered" :placeholder="item.componentProps.placeholder"
                @blur="getCustomMethod(item,'blur',$event)" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" />
        </a-form-item>
    </template>

    <!-- 滑动条 -->
    <template v-if="item.type == 'slider'">
        <a-form-item :label="item.label" v-show="!item.componentProps.hidden" :name="item.field">
            <a-slider id="test" v-model:value="pageData[item.field]" :style="item.componentProps.style"
                :disabled="item.componentProps.disabled" @blur="getCustomMethod(item,'blur',$event)"
                :reverse="item.componentProps.reverse" :min="item.componentProps.min" :max="item.componentProps.max"
                :range="item.componentProps.range" @focus="getCustomMethod(item,'focus',$event)"
                @change="getCustomMethod(item,'change',$event)" />
        </a-form-item>
    </template>

    <!-- 超链接 -->
    <template v-if="item.type == 'link'">
        <a-button type="link" :href="item.componentProps.href" :target="item.componentProps.target"
            :style="item.componentProps.style" :disabled="item.componentProps.disabled"
            v-show="!item.componentProps.hidden" @click="getCustomMethod(item,'click',$event)">
            {{ item.label }}
        </a-button>
    </template>

    <!-- 图片 -->
    <template v-if="item.type == 'image'">
        <div v-show="!item.componentProps.hidden">
            <a-image :style="item.componentProps.style" :width="item.width ? item.width : 240"
                :preview="item.componentProps.preview" :height="item.height ? item.height : 300"
                :src="item.componentProps.src" @error="getCustomMethod(item,'error',$event)" />
        </div>
    </template>

    <template v-else>
        <component :is="thisComponent" :item="item"></component>
    </template>
</template>

<script setup>
import {  defineProps, onMounted } from 'vue'
import { getComponentInstance } from '../../componentManager.js'
import { getCustomMethod, pageData } from '../../pageManager.js'

// 定义数据
// const data = reactive({})

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
})

const emit = defineEmits(['handleSetSelectItem', 'clearActive'])

const thisComponent = getComponentInstance(props.item.type).component;
/**
 * @method
 * @desc 点击组件
 */
const handleClickItem = (event) => {
    props.item.active = true;
    // 设置当前组件的选中
    emit("handleSetSelectItem", props.item);
    // 清除其它组件的点击状态
    emit("clearActive", props.item.id);
    // 阻止底层元素事件
    event.stopPropagation();
}

onMounted(() => {
    // alert("componentItem 渲染成功");
})

const imageError = () => {
    // console.log("imageError!!!!!!!!!!!!!");
}

// const handleMouseDown = (e) => {
//     e.stopPropagation();
//     console.log('wrap-handleMouseDown:',e)
// }

</script>

<style lang="less" scoped>
.component-item {
    padding: 5px;
}

.ant-form-item {
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}
</style>../../componentManager.js